<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/general.css">
    <link rel="stylesheet" href="../css/list.css">
</head>
<body>
    <div class="header">
        <ul>
            <li class="sy">返回首页</li>
            <li>网站导航</li>
            <li>商家入驻</li>
            <li>客户服务</li>
        </ul>
        <ul>
            <li><a href="register.html">注册有礼</a></li>
            <li>我的订单</li>
            <li>我的易购</li>
            <li>苏宁会员</li>
            <li class="gwc">购物车</li>
            <li>易付宝</li>
            <li>企业采购</li>
            <li>手机苏宁</li>
        </ul>
    </div>
    <div class="nav">
        <div class="left">
            <img src="https://image1.suning.cn/uimg/cms/img/159642507148437980.png" alt="">
        </div>
        <form>
            <input type="text" placeholder="空调限时抢" class="hq">
            <input type="submit" value="搜索" class="tj">
            <ul></ul>
        </form>
    </div>
    <div class="sn">
        <div>
            <i>会</i>
            <span class="a">会员</span>
        </div>
        <div>
            <i class="gwc"> 购<br>
                物<br>
                车<br></i>
            <span class="a">购<br>物<br>车<br></span>
        </div>
        <div>
            <i>信</i>
            <span class="a">消息</span>
            <span class="b">消息</span>
        </div>
        <ul>
            <li>
                <i>理</i>
                <span class="a">理财</span>
                <span class="b">理财</span>
            </li>
            <li>
                <i>足</i>
                <span class="a">足迹</span>
                <span class="b">足迹</span>
            </li>
            <li>
                <i>签</i>
                <span class="a">签到</span>
                <span class="b">签到</span>
            </li>
            <li>
                <i>咨</i>
                <span class="a">在线咨询</span>
                <span class="b">在线咨询</span>
            </li>
            <li>
                <i>意</i>
                <span class="a">意见反馈</span>
                <span class="b">意见反馈</span>
            </li>
            <li>
                <i>码</i>
                <span class="a">二维码</span>
                <span class="b">二维码</span>
            </li>
            <li>
                <i>顶</i>
                <span class="a">返回顶部</span>
                <span class="b">返回顶部</span>
            </li>
        </ul>
    </div>
  <div class="box container">
    <div class="content category">
      <div class="left">
        分类
      </div>
      <ul class="right">
        <!-- JS 渲染 -->
      </ul>
    </div>
    <div class="content filter">
      <div class="left">
        筛选
      </div>
      <ul class="right">
        <li data-type="" class="filter_item active">全部</li>
        <li data-type="sale" class="filter_item">折扣</li>
        <li data-type="hot" class="filter_item">热销</li>
      </ul>
    </div>
    <div class="content sale">
      <div class="left">
        折扣
      </div>
      <ul class="right">
        <li data-type="10" class="sale_item active">全部</li>
        <li data-type="5" class="sale_item">5</li>
        <li data-type="6" class="sale_item">6</li>
        <li data-type="7" class="sale_item">7</li>
        <li data-type="8" class="sale_item">8</li>
        <li data-type="9" class="sale_item">9</li>
      </ul>
    </div>
    <div class="content search">
      <div class="left">
        搜索
      </div>
      <div class="right">
        <input type="text">
      </div>
    </div>
    <div class="content sort">
      <div class="left">
        排序
      </div>
      <ul class="right">
        <li data-type="id" data-method="ASC" class="sort_item active">综合升序</li>
        <li data-type="id" data-method="DESC" class="sort_item">综合降序</li>
        <li data-type="price" data-method="ASC" class="sort_item">价格升序</li>
        <li data-type="price" data-method="DESC" class="sort_item">价格降序</li>
        <li data-type="sale" data-method="ASC" class="sort_item">折扣升序</li>
        <li data-type="sale" data-method="DESC" class="sort_item">折扣降序</li>
      </ul>
    </div>
    <div class="content pagenation">
      <div class="left">
        分页
      </div>
      <div class="right">
        <span class="left disable">&lt;</span>
        <span class="total">1 / 100</span>
        <span class="right">&gt;</span>
        <select>
          <option value="12">12</option>
          <option value="16">16</option>
          <option value="20">20</option>
          <option value="24">24</option>
        </select>
        <input type="text" value="1">
        <button class="go">跳转</button>
      </div>
    </div>
  </div>
  <ul class="list container">
    <!-- js 渲染 -->
  </ul>
  <script src="../../jquery/jquery.min.js"></script>
  <script src="../../utils.js"></script>
  <script src="../js/list.js"></script>
</body>
</html>